<template>
  <div class="header-container">
    <span class="logo">
<!--
  <el-icon class="mr-2"><eleme-filled></eleme-filled></el-icon>
  src='src/assets/logo/160.png'
-->
      <img :src='logo160' alt='精之研科技' width='40' height='40'>
      <span class='company ml-3'>精之研科技</span>
    </span>
    <el-tooltip effect="dark" :content="$store.state.asideMenu.tip" placement="bottom">
      <el-icon class="icon-btn" v-if="$store.state.asideMenu.isExpand" @click="handleFold"><fold /></el-icon>
      <el-icon class="icon-btn" v-else @click="handleFold"><expand /></el-icon>
    </el-tooltip>
    <el-tooltip effect="dark" content="刷新" placement="bottom">
      <el-icon class="icon-btn" @click="handleRefresh"><refresh /></el-icon>
    </el-tooltip>
    <div class="ml-auto flex items-center" style="margin-left: auto">
      <el-tooltip effect="dark" :content="fullScreenTip" placement="bottom">
        <el-icon class="icon-btn" @click="changeFullScreen">
          <span v-if="isFullscreen"><aim /></span>
          <span v-else><full-screen /></span>
        </el-icon>
      </el-tooltip>
      <el-dropdown class="dropdown" @command="handleCommand">
        <span class="flex items-center text-light-50">
          <el-avatar :size="25" :src="avatarUrl" class="mr-2"></el-avatar>
          <!-- {{ $store.state.user.sysUser.username }} -->
          {{ username }}
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <form-drawer ref="formDrawerRef" title="修改密码" @submit="onSubmit">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
        <el-form-item prop="oldpassword" label="旧密码">
          <el-input
            v-model="form.oldpassword"
            placeholder="输入旧密码"
            type="password"
            show-password
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="password" label="新密码">
          <el-input
            v-model="form.password"
            placeholder="输入新密码"
            type="password"
            show-password
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="repassword" label="确认密码">
          <el-input
            v-model="form.repassword"
            placeholder="重复新密码"
            type="password"
            show-password
          >
          </el-input>
        </el-form-item>
      </el-form>
    </form-drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useFullscreen } from "@vueuse/core";
import FormDrawer from "~/components/FormDrawer.vue";
import { useRePassword, useLogout } from "~/composables/useManager";
import store from "~/store";
import logo160 from '~/assets/logo/160.png'

// #region 变量
const username = store.state.user.sysUser.username;
const { isFullscreen, toggle } = useFullscreen();
const avatarUrl =
  "http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/5f50505928e60.jpg";
const fullScreenTip = ref("全屏");

const { formDrawerRef, form, rules, onSubmit } = useRePassword();
const { logout } = useLogout();
// #endregion

// #region 方法
// 切换全屏状态
const changeFullScreen = () => {
  if (isFullscreen) fullScreenTip.value = "退出全屏";
  else fullScreenTip.value = "全屏";
  toggle();
};

// 处理下拉菜单项点击事件
const handleCommand = (command) => {
  switch (command) {
    case "logout":
      logout();
      break;
    case "rePassword":
      formDrawerRef.value.open();
      break;
    default:
      break;
  }
};

// 刷新
const handleRefresh = () => location.reload();

const handleFold = () => {
  store.commit("setAsideWidth");
};
// #endregion
</script>
<style scoped>
.header-container {
  @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
  height: 64px;
  z-index: 1000;
}

.logo {
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}

.logo .company {
  font-size: 15px;
}

.icon-btn {
  @apply flex justify-center items-center;
  width: 42px;
  height: 64px;
  cursor: pointer;
}

.icon-btn:hover {
  @apply bg-indigo-600;
}

.dropdown {
  height: 64px;
  cursor: pointer;
  @apply flex justify-center items-center mx-5;
}
</style>
